<!DOCTYPE html>
<html>
    
    <head>
        <title>爱转动下载页</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
        <script src="js/jquery-3.2.0.min.js" type="text/javascript"></script>
        <script src="js/qrcode.js" type="text/javascript"></script>
        <style>
            * {margin:0;padding:0;}
            body {margin:0;padding:0;height:100%;background:#EEEEEE;}
            .container {
                position:absolute;
                width:100%;
                height:100%;
            }
            .download_wrap {
                position:absolute;
                display:inline-block;
                top:50%;
                left:50%;
                transform:translate(-50%, -50%);
                text-align:center;
            }
            .download_wrap img {
                width:4em;
                height:4em;
            }
            .download_wrap h3 {
                margin:0;
                padding:0;
            }
            .app_icon_div {
                position:relative;
                margin:0.8em 1em;
                height:5em;
            }
            .app_icon_div .app_icon {
                width:5em;
                height:100%;
                line-height:5em;
            }
            .app_icon_div .app_info {
                display:inline-block;
                position:absolute;
                width:70%;
                height:100%;
                margin-left:0.8em;
            }
            .app_icon_div .app_table {
                height:100%;
            }
            .app_size_downtimes {
                margin:-0.5em 1em 0 1em;
                display:inline-block;
            }
            .app_downtimes {
                display:inline-block;
            }

            .app_desc_div {
                position:relative;
                margin:0.7em 1em;
            }
            .app_desc_div .app_desc {
                text-indent:2em;
                margin:0.5em 0 0 0;
                word-spacing:3em;
            }
            .qrcode_div {
                margin:1em 1em 4.0em 1em;
                text-align:center;
            }
            .qrcode_div .qrcode_label {
                color:red;
            }
            #qrcode img {
                text-align:center;
                margin:1em auto;
                padding:1em;
                background:white;
            }
            .bottom {
                position:fixed;
                bottom:0;
                height:3.5em;
                background:white;
                border-top:1px solid gray;
                width:100%;
                text-align:center;
                left:0px;
            }
            .bottom .app_open {
                display:inline-block;
                position:absolute;
                left:50%;
                margin:0;
                top:50%;
                height:2em;
                width:50%;
                border-radius:0.5em;
                text-align:center;
                line-height:2.1em;
                border:#888888 solid 1px;
                background:transparent;
                transform:translate(-50%, -50%);
            }
            .app_open:link {text-decoration:none;color:black;background:white;}
            .app_open:visited {text-decoration:none;color:black;background:white;}
            .app_open:hover {text-decoration:none;color:black;background:white;}
            .app_open:active {text-decoration:none;color:black;background:#DDDDDD;}
        </style>
        <script type="text/javascript">
            function updateContent(app_icon, app_title, app_version, app_evalution, app_size, app_downtimes, app_desc, downUrl) {
                document.getElementById("app_icon").src = app_icon;
                document.getElementById("app_title").innerText = app_title;
                document.getElementById("app_version").innerText = app_version;
                document.getElementById("app_evalution").innerText = app_evalution;
                document.getElementById("app_size").innerText = app_size;
                document.getElementById("app_downtimes").innerText = app_downtimes;
                document.getElementById("app_desc").innerText = app_desc;
                document.getElementById("down_link").href = downUrl;
            }
            function setAppInfo() {
                var app_icon = "images/ic_launcher.png";
                var app_title = "爱转动";
                var app_version = "1.0.2";
                var app_evalution = "3.5分";
                var app_size = "7.54MB";
                var app_downtimes = "60";
                var app_desc = "爱转动是一款能够通过自传播方式实现在线公益性质活动的、能够实时求助和帮助他人的一种慈善公益性质的移动互联网产品，通过个人信息录入、发布、创建个人公益组织和发展团体组织向有需要帮助的用户、群体或团体发起的一个或多个慈善服务活动；爱转动是一款双向的公益性质产品，用户也可以通过个人的信用积分向他人发布和索取求助。及时分享和传递“爱”的信息。";
                var downUrl = "http://www.mysee.cc:18308/mse-admin/version/download/mysee_Official_release_2017-03-01-11-40-56_1.0.0.apk";
                downUrl = "extra/mysee.apk";
                updateContent(app_icon, app_title, app_version, app_evalution, app_size, app_downtimes, app_desc, downUrl)
            }
            function setDownQrcode() {
                var qrcode = new QRCode(document.getElementById("qrcode"), {
                    width : 280,//设置宽高
                    height : 280
                });
                var url = document.getElementById("down_link").href;
                qrcode.makeCode(url);
            }
            window.onload = function() {
                setAppInfo();
                setDownQrcode();
            }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="app_icon_div">
                <img src="images/ic_launcher.png" class="app_icon" id="app_icon"></img>
                <div class="app_info">
                    <table class="app_table" border=0 cellspacing=0>
                        <tr style="padding:0;"><td><h3 id="app_title">爱转动</h3></td></tr>
                        <tr><td><h5>版本: <span id="app_version">0.0.54</span></h5></td></tr>
                        <tr><td><h5>评分: <span id="app_evalution">3.5分</span></h5></td></tr>
                    </table>
                </div>
            </div>
            <div class="app_size_downtimes">
                <h5 class="app_downtimes">大小: <span id="app_size">6.4MB</span></h5>&nbsp;&nbsp;<h5 class="app_downtimes">下载次数: <span id="app_downtimes">60</span>次</h5>
            </div>
            <div class="app_desc_div">
                <p>应用简介</p>
                <p class="app_desc" id="app_desc"></p>
            </div>
            <div class="qrcode_div">
                <h4 class="qrcode_label">扫描二维码下载应用</h4>
                <!--<img src="images/erweima.png"></img>-->
                <div id="qrcode"/>
            </div>
            <div class="bottom">
                <a class="app_open" id="down_link">下载</a>
            </div>
        </div>
    </body>

</html>